<template>
  <div class="business-detal">
    <top-header></top-header>
    <div class="common-list-body" v-fullheight>
      <detail-top :content="detail.name">
        <template #title>业务名称</template>
      </detail-top>

      <ul>
        <li>
          <div>业务名称：</div>
          <div>{{ $tools.showContent(detail.name) }}</div>
        </li>
        <li>
          <div>业务状态：</div>
          <div>{{ $tools.showContent(businessStatus[detail.status || "0999"]) }}</div>
        </li>
        <li>
          <div>业务类别：</div>
          <div>{{ $tools.showContent(detail.menuName) }}</div>
        </li>
        <li>
          <div>报告号：</div>
          <div>
            <div v-if="detail.agencyNo">
              <div v-for="(item, key) in detail.agencyNo" :key="key">{{ item }}</div>
            </div>
            <div v-else>{{ $tools.showContent() }}</div>
          </div>
        </li>
        <li>
          <div>盖章时间：</div>
          <div>
            <div v-if="detail.agencyStampTime">
              <div v-for="(item, key) in detail.agencyStampTime" :key="key">{{ item }}</div>
            </div>
            <div v-else>{{ $tools.showContent() }}</div>
          </div>
        </li>
        <li>
          <div>项目负责人：</div>
          <div>{{ $tools.showContent(detail.projectLeader) }}</div>
        </li>
        <li>
          <div>项目经理：</div>
          <div>{{ $tools.showContent(detail.projectManager) }}</div>
        </li>
        <li>
          <div>开始时间：</div>
          <div>{{ $tools.showContent(detail.businessStartTime) }}</div>
        </li>
        <li>
          <div>完成时间：</div>
          <div>{{ $tools.showContent(detail.businessEndTime) }}</div>
        </li>
        <li>
          <div>资料归档：</div>
          <div>{{ $tools.showContent(businessDocStatus[detail.archiveStatus || "0999"]) }}</div>
        </li>
      </ul>

      <div class="count bottom-div">
        <a href="javascript:;" @click="openDoc">
          <div class="title">
            <span>项目文档</span>
          </div>
          <div>
            <div class="number-1">{{ detail.projectFileCounts }}</div>
            <div class="text">项目文档</div>
          </div>
        </a>

        <router-link :to="{ name: 'BusinessResultsReviewList', query: { businessId: this.businessId, businessCategoryId: this.businessCategoryId } }">
          <div class="title">
            <span>成果校审</span>
          </div>
          <div class="item-2">
            <div>
              <div class="number-2">{{ detail.completeWorkflowCounts }}</div>
              <div class="text">已办结</div>
            </div>
            <div>
              <div class="number-3">{{ detail.dealWorkflowCounts }}</div>
              <div class="text">办理中</div>
            </div>
          </div>
        </router-link>
      </div>

      <div class="other-info">
        <router-link :to="{ name: 'BusinessHandbook', query: { businessCategoryId: this.businessCategoryId } }">
          <img class="img-1" src="~@/assets/images/bg-0.png" alt="" />
          <span>业务手册</span>
          <img class="img-2" src="~@/assets/images/more-1.png" alt="" />
        </router-link>
        <router-link :to="{ name: 'BusinessTypicalCaseList', query: { businessCategoryId: this.businessCategoryId } }">
          <img class="img-1" src="~@/assets/images/bg-1.png" alt="" />
          <span>典型案例</span>
          <img class="img-2" src="~@/assets/images/more-1.png" alt="" />
        </router-link>
      </div>
    </div>

    <business-doc ref="docIndex"></business-doc>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import TopHeader from "@/components/TopHeader.vue";
import Api from "@/api";
import Enum from "@/typings/Enum";
import Base from "@/utils/base";
import BusinessDoc from "./Components/Doc.vue";
import { Popup } from "vant";
import DetailTop from "@/components/DetailTop.vue";

@Component({
  name: "BusinessDetail",
  components: {
    DetailTop,
    TopHeader,
    BusinessDoc,
    VanPopup: Popup
  }
})
export default class BusinessDetail extends Base {
  private projectStatus = Enum.ProjectStatus;
  private businessId = "";
  private businessCategoryId = "";
  private detailSource: any = {};
  private businessStatus = Enum.BusinessStatus;
  private businessDocStatus = Enum.BusinessDocStatus;

  created() {
    this.businessCategoryId = (this.$route.query.businessCategoryId ? this.$route.query.businessCategoryId : "") as string;
    this.businessId = (this.$route.query.businessId ? this.$route.query.businessId : "") as string;
    if (this.businessId) {
      this.$cPromise.all([this.getProjectDetail()]);
    }
  }

  async getProjectDetail() {
    const res = await Api.GetBusinessDetail(this.businessId);
    if (res && res.code) {
      this.detailSource = res.data;
    }

    return res;
  }

  private get detail() {
    const _return = this.detailSource;
    if (_return && _return.agencyNo) {
      _return.agencyNo = _return.agencyNo.split(",");
    }

    if (_return && _return.agencyStampTime) {
      _return.agencyStampTime = _return.agencyStampTime.split(",");
    }
    return _return;
  }

  private openDoc() {
    this.$nextTick(() => {
      (this.$refs as any).docIndex.show();
    });
  }
}
</script>

<style lang="less" scoped>
.business-detal {
  .common-list-body {
    // background: url("~@/assets/images/project-detail.png") top center no-repeat;
    background-size: 100%;
  }
  ul {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 5px 11px 0px rgba(3, 0, 195, 0.05);
    margin: 10px 10px 0 10px;
    padding: 16px 23px 16px 30px;
    color: #596275;
    font-size: 13px;
  }
  li {
    position: relative;
    padding: 8px 0px;
    display: flex;
    justify-content: space-between;
    & > div {
      &:first-child {
        flex-shrink: 0;
        color: #8b8f98;
      }

      &:last-child {
        width: 70%;
        text-align: right;
      }
    }
    &::before {
      height: 5px;
      width: 5px;
      border-radius: 5px;
      left: -13px;
      top: 15px;
      position: absolute;
      content: "";
      background-color: #d8d8d8;
    }
  }

  .bottom-div {
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 6px 9px 0px rgba(3, 0, 195, 0.05);
  }

  .count {
    padding-bottom: 10px;
    display: flex;
    margin: 10px 10px 0px 10px;
    position: relative;

    &::before {
      content: "";
      border-right: 1px solid #eff2f8;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
    }

    .number-1,
    .number-2,
    .number-3 {
      font-size: 22px;
      font-family: "DINAlternateBold";
    }
    .text {
      color: #33476f;
      font-size: 13px;
    }

    .number-1 {
      color: #454156;
    }

    .number-2 {
      color: #2ea38d;
    }

    .number-3 {
      color: #e85258;
    }
    a {
      text-align: center;
      width: 50%;
      position: relative;
    }

    .item-2 {
      display: flex;
      position: relative;
      &::before {
        content: "";
        border-right: 1px solid #eff2f8;
        position: absolute;
        bottom: 2px;
        height: 15px;
        left: 50%;
      }
      & > div {
        width: 50%;
      }
    }

    .title {
      text-align: center;
      margin-bottom: 7px;
      span {
        padding: 3px 5px;
        display: inline-block;
        color: #5896eb;
        font-size: 10px;
        background: rgba(#32b2ff, 0.09);
        border-radius: 0px 0px 5px 5px;
      }
    }
  }

  .other-info {
    display: flex;
    justify-content: space-between;
    margin: 10px 10px 10px 10px;

    & > a {
      background: url("~@/assets/images/wave.png") #ffffff center bottom no-repeat;
      border-radius: 5px;
      box-shadow: 0px 6px 9px 0px rgba(3, 0, 195, 0.05);
      height: 52px;
      width: 48.5%;
      background-size: contain;
      display: flex;
      align-items: center;
      color: #596275;
    }

    .img-1 {
      width: 32px;
      margin-left: 23px;
      margin-right: 15px;
    }

    .img-2 {
      width: 8px;
      margin-left: 30px;
    }
  }
}
</style>
